<template>
  <div class="article_box">

    <!-- 内容主体区域 -->
    <el-form ref="ruleForm" label-width="120px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="员工编号：" required>
            <el-input v-model="StaffForm.empId" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="员工姓名：" required>
            <el-input v-model="StaffForm.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="电话号码：" required>
            <el-input v-model="StaffForm.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="电子邮箱：" required>
            <el-input v-model="StaffForm.email" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="性别：" required>
            <el-radio-group v-model="StaffForm.gender">
              <el-radio label="0">女</el-radio>
              <el-radio label="1">男</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="出生日期：" required>
            <!-- <el-radio v-model="StaffData.radioPub" label="1">立即发布</el-radio>
                        <el-radio v-model="StaffData.radioPub" label="2">定时发布</el-radio> -->
            <!-- :disabled="datePickerVisible"  -->
            <el-date-picker
              v-model="StaffForm.birth_date"
              class="date-picker"
              type="date"
              placeholder="请选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="所属部门：" required>
            <!-- <el-input v-model="StaffForm. deptName"></el-input> -->
            <el-select v-model="StaffForm.deptName" clearable placeholder="请选择部门">
              <el-option
                v-for="item in dept"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
            <!-- <el-input v-model="form.deptName" placeholder="请输入员工所属部门" clearable></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="入职日期：" required>
            <el-date-picker
              v-model="StaffForm.hire_date"
              class="date-picker"
              type="date"
              placeholder="请选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="10">
          <!-- v-model="form.type" @change="statusChange()"-->
          <el-form-item label="状态：">
            <el-select v-model="StaffForm.type" clearable placeholder="请选择">
              <el-option key="在职" label="在职" value="在职" />
              <el-option key="离职" label="离职" value="离职" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="家庭地址：">
            <el-cascader v-model="selectedOptions" :options="options" clearable @change="addressChoose" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <!-- 底部区域 -->
    <el-row>
      <el-col :span="12">
        <div class="emp_btnbox">
          <span slot="footer" class="dialog-footer">
            <el-button @click="closePage()">取 消</el-button>
            <el-button type="primary" @click="ListConfirm()">确 定</el-button>
          </span>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import { addNoticeList, getStaffInfo } from '@/api/newUsertest'
import { regionData } from 'element-china-area-data' // 城市选择器

export default {
  components: {},
  data() {
    return {
      // 员工数据
      StaffForm: {
        empId: '', // 员工编号
        name: '',
        gender: '', // 性别
        birth_date: '1',
        deptName: '1', // 部门名称
        hire_date: '',
        is_enable: '', // 是否启用
        address: [],
        province: '',
        city: '',
        area: ''
      },
      StaffData: [],
      dept: [{
        value: '0',
        label: '行政办公室'
      },
      {
        value: '1',
        label: '人力资源部'
      },
      {
        value: '2',
        label: '工会办公室'
      },
      {
        value: '3',
        label: '安全监察部'
      },
      {
        value: '4',
        label: '质控管理部'
      },
      {
        value: '5',
        label: '信息技术部'
      },
      {
        value: '6',
        label: '数智企业部'
      }
      ],
      // 是新增或编辑状态
      Type: '',
      //    options: []
      // 省市区级联
      options: regionData,
      selectedOptions: []

    }
  },
  computed: {
    // datePickerVisible () {
    //     if (this.StaffData.radioPub === '1') {
    //         this.StaffData.publish_date = new Date().format('yyyy-MM-dd')
    //         return true
    //     } else {
    //         return false
    //     }
    // }
  },
  created() {
    console.log(this.options)
    const id = this.$route.query.Id // this.$route.params && this.$route.params.id
    this.Type = this.$route.query.type
    if (this.Type == 'edit') {
      this.editContent(id)
    }
    // this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    // 编辑页赋值公告内容
    editContent(id) {
      // console.log(id)
      // this.updateEdit(id)
      getStaffInfo(id).then(response => {
        this.StaffForm = response.data
        // 发布范围回显
        // console.log(this.StaffForm)
      }).catch(err => {
        console.log(err)
      })
    },
    ListConfirm() {
      if (this.Type == 'edit') {
        // this.editListConfirm()
      } else if (this.articleType == 'add') {
        this.addListConfirm()
      }
    },
    /** 省市区三级联动 */
    addressChoose(value) {
      console.log('省市区：', value)
      // this.StaffForm.province = CodeToText[value[0]];
      // this.StaffForm.city = CodeToText[value[1]];
      // this.StaffForm.area = CodeToText[value[2]];
      // 省市区转换
      console.log(this.options)
    },
    // 编辑保存公告内容
    // editListConfirm () {
    //     var operate_time = new Date().format('yyyy-MM-dd hh:mm:ss')
    //     editNoticeList({
    //         'title': this.StaffData.title,
    //         'articeType': this.StaffData.articeType,
    //         'content': this.StaffData.content,
    //         'publish_date': this.StaffData.publish_date,
    //         'is_comment': this.StaffData.is_comment,
    //         'id': this.StaffData.id,
    //         'author': this.StaffData.author,
    //         'operate_time': operate_time,
    //         'operator': this.StaffData.operator,
    //         'radioPub': this.StaffData.radioPub,
    //         'visitNum': this.StaffData.visitNum,
    //     }).then(response => {
    //         if (response.code != 20000) {
    //             this.$message.error('编辑公告失败！')
    //         } else {
    //             this.$message.success('编辑公告成功！')
    //             // 关闭页面
    //             this.closePage()
    //         }
    //         console.log(response.data)
    //     })

    //     // this.getNoticeList()
    // },
    // 确认新增数据
    addListConfirm() {
      var operate_time = new Date().format('yyyy-MM-dd')

      if (this.StaffData.title == '') {
        this.$message.error('请输入文章标题')
        return false
      }

      if (this.StaffData.title != '') {
        addNoticeList({
          'title': this.StaffData.title,
          'articeType': this.StaffData.articeType,
          'content': this.StaffData.content,
          'publish_date': this.StaffData.publish_date,
          'is_comment': this.StaffData.is_comment,
          'author': this.StaffData.author,
          'operate_time': operate_time,
          'radioPub': this.StaffData.radioPub

        }).then(response => {
          if (response.code != 20000) {
            this.$message.error('添加公告失败！')
          } else {
            this.$message.success('添加公告成功！')
            // 关闭页面
            this.closePage()
          }
          console.log(response.data)
        })
      }

      // this.addDialogVisible = false
      // this.getNoticeList()
    },
    closePage() {
      var currentView = this.$store.state.tagsView.visitedViews[0]
      for (currentView of this.$store.state.tagsView.visitedViews) {
        if (currentView.path === this.$route.path) {
          break
        }
      }
      this.$store.dispatch('tagsView/delView', currentView)
        .then(({ visitedViews }) => {
          if (currentView.path === this.$route.path) {
            const latestView = this.$store.state.tagsView.visitedViews.slice(-1)[0]
            if (latestView) {
              this.$router.push(latestView)
            } else {
              // 如果没有其他标签则跳转到首页
              if (currentView.name === '首页') {
                this.$router.replace({ path: '/redirect' + currentView.fullPath })
              } else {
                this.$router.push('/')
              }
            }
          }
        })
    }

  }
}
</script>
<style lang="scss" scoped>
.article_box {
    padding: 20px;
    box-sizing: border-box;

    .emp_btnbox {
        width: 100%;
        text-align: right;
        margin-bottom: 30px;
        margin-top: 80px;
    }

    .mce-btn-has-text {
        border: 1px solid #000;
    }
}

</style>
